<script lang="ts" setup>
import { NCard, NIcon } from "naive-ui";
import { BugOutline, SparklesOutline, NewspaperOutline, RocketOutline } from "@vicons/ionicons5";
import BaseEChart from "@/components/echarts/EChart.vue";
import type { EChartCoreOption } from "@/plugins/echarts/index";
import type { Component } from "vue";
import { useDesignStore } from "@/stores/module/design";

const { getPrefixCls } = useDesignStore();

const prefixCls = getPrefixCls("console");

interface Desc {
  icon: Component;
  text: string;
}

const options: EChartCoreOption = {
  tooltip: {
    trigger: "item",
  },
  legend: {
    top: "-1%",
    left: "center",
  },
  series: [
    {
      name: "技术栈",
      type: "pie",
      radius: ["60%", "85%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2,
      },
      label: {
        show: false,
        position: "center",
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 30,
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 40, name: "Vue" },
        { value: 60, name: "TypeScript" },
        { value: 30, name: "HTML" },
        { value: 10, name: "CSS" },
        { value: 5, name: "Other" },
      ],
    },
  ],
};

const descOptions: Desc[] = [
  {
    icon: NewspaperOutline,
    text: "使用主流技术栈 :Vue3 + Vite + Pinia",
  },
  {
    icon: RocketOutline,
    text: "使用当下火热组件库 :Naive UI",
  },
];
</script>

<template>
  <div :class="prefixCls">
    <div :class="`${prefixCls}-top`">
      <NCard title="说明" :segmented="{ content: true }">
        <template #header-extra>
          <NIcon :size="26"><SparklesOutline /></NIcon>
        </template>
        <div :class="`${prefixCls}-top-desc`">
          <div :class="`${prefixCls}-top-desc-item`" v-for="item in descOptions" :key="item.text">
            <NIcon :size="22"> <component :is="item.icon" /> </NIcon>
            <span>{{ item.text }}</span>
          </div>
        </div>
      </NCard>

      <NCard title="技术栈" :segmented="{ content: true }">
        <template #header-extra>
          <NIcon :size="26"><BugOutline /></NIcon>
        </template>
        <BaseEChart :options="options" />
      </NCard>
    </div>
  </div>
</template>

<style lang="less" scoped>
@prefix-cls:~ "@{namespace}-console";
.@{prefix-cls} {
  &-top {
    @apply flex gap-5 p-5;

    &-desc {
      @apply flex flex-col gap-2;

      &-item {
        @apply flex gap-2;
      }
    }
  }
}
</style>
